<template>
  <div class="main-container">
    <el-container class="layout-wrapper">
      <!-- 顶部导航 -->
      <el-header class="main-header">
        <div class="header-content">
          <div class="brand-container">
            <h2 style="color:coral;">欢迎</h2>&emsp;
            <span class="nickname" style="color:red;">{{ store.ccstore.nickName }}</span>&emsp;<h2 style="color:coral;">光临</h2>
          </div>

          <div class="user-panel">
            <el-dropdown>
              <div class="user-info">
               
                <div class="user-detail">
                  <el-button type="danger"  @click="logout">退出登录</el-button>
                </div>
              </div>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu active-text-color="#ffd04b" background-color="#1a2035" text-color="#fff" @select="" router
            style="height: 85vh;" mode="vertical">
            <MenuTree :menus="APImenuTree" />
           

        <el-sub-menu index="1">
          <template #title>
            <span>溯源管理</span>
          </template>
            <el-menu-item index="/ShowRabbit">显示基本信息表</el-menu-item>
        </el-sub-menu>

          </el-menu>
        </el-aside>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import { useCounterStore } from '@/stores/counter';
import axios from 'axios';
import MenuTree from './module components/MenuTree.vue';
import { ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
const router = useRouter();
const logout = () => {
  // 退出登录逻辑
  router.push({
    name: 'NewLoginView'
  })
}
const store = useCounterStore();
//#region  菜单栏 API提供树形结构数据
var APImenuTree = ref([])
const GetMenuTree = () => {
  axios.get(`https://localhost:7174/api/Menu/GetTreeMenu?UserId=${store.ccstore.userId}`).then(res => {
    APImenuTree.value = res.data.data
    // console.log(APImenuTree.value, "API获取数据存入APImenuTree.value中")
  })
}


//#endregion


//#region 菜单栏 需要前端转换

// 获取菜单的数据
const MenuData = ref([])
//获取菜单
const GetMenuData = () => {
  axios.get(`https://localhost:7174/api/RoleMenu/GetUserMenu?UserId=${store.ccstore.userId}`).then(res => {
    MenuData.value = res.data.data
    // console.log(MenuData.value, "获取菜单数据")
    //将扁平数据转换为树形结构方法
    buildMenuTree(res.data.data);
  })
}

//转换树形
function buildMenuTree(menuList: any) {
  // console.log(menuList, "传过来的原数据")
  // 去重：以 menuId 为键，确保每个菜单项唯一
  const menuMap: any = {};
  menuList.forEach((item: any) => {
    if (!menuMap[item.menuId]) {
      menuMap[item.menuId] = {
        menuId: item.menuId,
        menuName: item.menuName,
        url: item.url,
        parentId: item.parentId,
        children: []
      };
    }
  });
  const uniqueMenus = Object.values(menuMap);

  // 构建哈希表并初始化树
  const nodeMap = {};
  const tree: any = [];
  uniqueMenus.forEach((menu: any) => {
    nodeMap[menu.menuId] = { ...menu, children: [] };
  });

  // 建立父子关系
  uniqueMenus.forEach(menu => {
    const node = nodeMap[menu.menuId];
    const parentId = menu.parentId;
    if (parentId !== null && parentId !== undefined) {
      const parent = nodeMap[parentId];
      if (parent) {
        parent.children.push(node);
      } else {
        // 父节点不存在，作为根节点
        tree.push(node);
      }
    } else {
      // 无父节点，直接作为根节点
      tree.push(node);
    }
  });
  menuTree.value = tree
  // console.log(menuTree.value, "转换后的Tree菜单名称")
  return tree;
}

//存放转换完成的数据
const menuTree = ref();


//#endregion



onMounted(() => {
  //API直接获取菜单树形结构数据
  GetMenuTree();
  //获取菜单数据普通
  // GetMenuData();
})


</script>

<style scoped>
.el-menu-vertical-demo {
  width: 200px;
}

html,
body {
  height: 100%;
}

/* 设置 el-menu 为 flex 布局 */
.horizontal-menu {
  display: flex;
  align-items: center;
}

/* 将退出登录菜单项推到最右侧 */
.logout-menu-item {
  margin-left: 130vh;
}
</style>
<style scoped lang="scss">
.main-container {
  height: 100vh;
  background: #f5f7fb;
}

.layout-wrapper {
  height: 100%;
}

.main-header {
  height: 64px;
  background: linear-gradient(135deg, #20d4f8, #20d4f8);
  box-shadow: 0 2px 10px rgba(12, 12, 12, 0.2);

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 30px;
  }
}

.brand-container {
  display: flex;
  align-items: center;

  .logo {
    width: 36px;
    height: 36px;
    background: #409EFF;
    border-radius: 6px;
    margin-right: 12px;
    position: relative;

    &::after {
      content: 'SM';
      position: absolute;
      color: rgb(216, 208, 208);
      font-weight: bold;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .system-name {
    color: rgb(111, 103, 121);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
  }
}

.user-panel {
  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      opacity: 0.9;
    }

    .user-detail {
      margin-left: 12px;
      display: flex;
      flex-direction: column;

      .nickname {
        color: rgba(29, 112, 94, 0.772);
        font-size: 14px;
        line-height: 1.4;
      }

      .role {
        color: rgba(255, 255, 255, 0.7);
        font-size: 12px;
      }
    }

    .arrow {
      color: rgba(255, 255, 255, 0.7);
      margin-left: 8px;
    }
  }
}

.side-menu {
  background: #1b2137;
  transition: width 0.3s;
  border-right: 1px solid rgba(255, 255, 255, 0.1);

  :deep(.el-menu) {
    border-right: none;

    .el-menu-item {
      height: 48px;
      line-height: 48px;
      margin: 4px 12px;
      border-radius: 6px;
      transition: all 0.3s;

      &:hover {
        background: rgba(64, 158, 255, 0.1);
      }

      &.is-active {
        background: rgba(102, 81, 33, 0.2);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 60%;
          background: #409EFF;
          border-radius: 2px;
        }
      }
    }

    .el-sub-menu {
      .el-sub-menu__title {
        &:hover {
          background: rgba(58, 142, 227, 0.1);
        }
      }
    }
  }
}

.content-area {
  padding: 20px;
  background: #bbc1ce;

  :deep(.el-scrollbar__view) {
    min-height: calc(100vh - 84px);
  }
}

.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style>